<script type="text/ecmascript-6">
	/**
	 * Created by wcz on 2017/1/7.
	 */
	export default {
		props: {
		    src: {
		    	default: ''
            }
        },
		data () {
			return {
                imgView: false
            }
		},
		computed: {
			hasImg () {
			    return !!this.src && this.src != 'null'
            },
			generateThumbnail () {
				return `${cdn}${this.src}?imageView2/0/w/350`
			},
			generateSlim () {
				return `${cdn}${this.src}?imageslim`
			}
        },
		mounted () {

		},
		methods: {
			viewBig () {
                this.imgView = true
            },
			closeView () {
				this.imgView = false
            }
        },
	};
</script>

<template>
    <div class="img">
        <img @click="viewBig" v-if="hasImg" :src="generateThumbnail" class="img__inner"/>
        <p v-if="hasImg" class="img__ps" layout="row center-center">点击查看大图</p>
        <div v-else class="img__empty" layout="row center-center">
            暂缺
        </div>
        <div v-if="imgView" class="img__modal" layout="row center-center">
            <i class="img__close el-icon-close" @click="closeView"></i>
            <img v-if="hasImg" :src="generateSlim" class="img__big"/>
        </div>
    </div>
</template>